<%@ page language="java" import="java.util.*" pageEncoding="Utf-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>酒店统计</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/common/style/base.css" type="text/css" media="screen" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/common/style/page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/common/src/css/jscal2.css" type="text/css" media="screen" />
<script src="${pageContext.request.contextPath}/common/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/common/js/common.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/common/src/js/jscal2.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/common/src/js/lang/cn.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/common/js/highcharts.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/common/js/exporting.js" type="text/javascript"></script>
<script>
$(function(){
	//高度自适应
	initLayout1();   
	$(window).resize(function(){   
		initLayout1();   
	});
})
	function initLayout1() {   
		var mfh = document.documentElement.clientHeight;
		$('#main_frame').height(mfh).css("bottom","0"); 
		
		var mfw = document.documentElement.clientWidth;
		$('#main_frame').width(mfw); 			

	};

</script>
</head>
	<body>
		<div id="main_frame" >
			<div id="pagemenu"><a href="getHotRoomListByPage.action" title="统计列表" >统计列表</a>|<a href="javascript:void(0);"  class="searchlink"  title="搜索">搜索</a>|<a href="getHotRoomListByPage.action?type=1"   class="selected">统计图表</a></div>
			<div class="searchbox" style="display:none">
		<form action="search.action?type=1" method="post">
		时间：<input type="text" class="dateinput1" id="startDate" name="startDate"/>-<input type="text" class="dateinput1" id="endDate" name="endDate"/>
		<script type="text/javascript">
			Calendar.setup({
				inputField : "startDate",
				trigger    : "startDate",
				dateFormat: "%Y-%m-%d",
				minuteStep: 1,
				onSelect   :  function() {
					this.hide();
					if(($("#endDate").val()!=""&&($("#startDate").val()>$("#endDate").val())))
							{
								alert("不能大于结束时间.");
								$("#startDate").val("");
								return ;
							}
				}
			});
				Calendar.setup({
				inputField : "endDate",
				trigger    : "endDate",
				dateFormat: "%Y-%m-%d",
				minuteStep: 1,
				onSelect   :  function() {
					this.hide();
					if(($("#startDate").val()!=""&&($("#endDate").val()<$("#startDate").val())))
							{
								alert("不能小于开始时间.");
								$("#endDate").val("");
								return ;
							}
				}
			});
		</script>
		<input type="submit" value="搜索" class="cancelbtn" style="margin-top:0;"/>
		</form>
	</div>
	<div id="container" style="height: 400px"></div>
			
           <script type="text/javascript">
			 $(function () {
			    $('#container').highcharts({
			        chart: {
			            type: 'column'
			        },
			        title: {
			            text: '订单统计'  
			        },
			        xAxis: {
			            categories: [<s:iterator value="resultlist" id="x">
							'${x.roomName}',
							</s:iterator>],
         			   labels: {
                		 style: {
                    		color: 'red',
                    		fontSize:'15px'
               			 }
          			   }
			        },
			         yAxis: [{
			            title: {
			                text: '数量',
			                margin:30,
			                style:{
			                	fontSize:'15px'			                	
			                },
			                rotation: 0
			            }
			        },{
			            lineWidth: 1,
			            opposite: true,
			            min:0,
			            
			            title: {
			                text: '金额',
			                margin:30,
			                style:{
			                	fontSize:'15px'			                	
			                },
			                rotation: 0
			            }
		        	}],
			         exporting: {
			            enabled: true
			        },

			        tooltip: {
			            formatter: function() {
			                return '<b>'+ this.series.name +'</b><br/>'+
			                    this.x +': '+ this.y;
			            }
			        },
			        series: [{
			            data: [<s:iterator value="resultlist" id="x">
							${x.all},
							</s:iterator>],
			            name: '总订单',
			            color: "#9FB6CD",
			            dataLabels: {
			                    enabled: true,			                   
			                    style: {
			                        fontSize: '13px',
			                        fontFamily: 'Verdana, sans-serif'
			                    }
               			 }
			        },{
			            data: [<s:iterator value="resultlist" id="x">
							${x.ordernum},
							</s:iterator>],
						color: "#BFEFFF",
			            name: '成交订单',
			            dataLabels: {
			                    enabled: true,
			                    style: {
			                        fontSize: '13px',
			                        fontFamily: 'Verdana, sans-serif'
			                    }
               			 }
			        },{
			            data: [<s:iterator value="resultlist" id="x">
							${x.cancel},
							</s:iterator>],
						color: "#98FB98",
			            name: '取消订单',
			            dataLabels: {
			                    enabled: true,
			                    style: {
			                        fontSize: '13px',
			                        fontFamily: 'Verdana, sans-serif'
			                    }
               			 }
			        },{
			            data: [<s:iterator value="resultlist" id="x">
							${x.totalMoney},
							</s:iterator>],
			            name: '成交金额',
			            yAxis:1,
			            type: 'line',
			            dataLabels: {
			                    enabled: true,
			                    style: {
			                        fontSize: '14px',
			                        color:'red',
			                        fontFamily: 'Verdana, sans-serif'		                      
			                    },
			                    x:10
               			 }
			        }]
			    });
			});
 			</script>
			
		</div>
	</body>
</html>